import { Leafer } from "leafer-ui";
import { mainMap } from "./map";
import { MyTank } from "./myTank";
import { Tank } from "./tank";
import { sprite } from "./Sprite";
import { Seedrandom } from "./seedrandom";

export let seedrandom: Seedrandom | undefined;
export class MyWebSoket {
  socket: WebSocket;
  id: string | null = null;
  ids: string[] = [];
  tankMap: Map<string, Tank> = new Map();
  leafer: Leafer;
  status: boolean = false;
  seedrandom;
  constructor(leafer: Leafer) {
    // 创建 WebSocket 实例
    const socket = new WebSocket("ws://192.168.2.57:8077");
    this.leafer = leafer;
    // 监听连接打开事件
    socket.onopen = function (event) {
      console.log("WebSocket 连接已打开");
    };

    // 监听消息接收事件
    socket.onmessage = (event) => {
      const msg = JSON.parse(event.data);
      if (msg.code === 201) {
        //初始化
        this.id = msg.id;
      } else if (msg.code === 202) {
        //准备
        console.log(msg, "链接人数达标");
        this.leafer.clear();
        seedrandom = new Seedrandom(msg.seedrandom);
        this.seedrandom = msg.seedrandom;
        mainMap.setMap(msg.map);
        mainMap.draw();
        //链接人数达标
        this.ids = msg.ids;
        this.initTank();
      } else if (msg.code === 205) {
        // 开始
        this.status = true;
      } else if (msg.code === 301) {
        // 结束
        this.status = false;
      } else if (msg.code === 302) {
        console.log("开始回放");
        this.leafer.clear();
        mainMap.draw();
        seedrandom = new Seedrandom(this.seedrandom);
        this.initTank();
        // 回放
        let index = 0;
        let time = setInterval(() => {
          (msg.historyData as Array<Array<any>>)[index].forEach((msg) => {
            if (msg.keyType === "down")
              this.tankMap.get(msg.id)?.updateActionDirection(msg.code);
            else this.tankMap.get(msg.id)?.clearActionDirection(msg.code);
          });
          sprite.run();
          if (index === msg.historyData.length - 1) clearInterval(time);
          index++;
        }, msg.fps || 20);
      } else if (msg.type === "public") {
        if (!this.status) return;
        (msg.data as Array<any>).forEach((msg) => {
          if (msg.keyType === "down")
            this.tankMap.get(msg.id)?.updateActionDirection(msg.code);
          else this.tankMap.get(msg.id)?.clearActionDirection(msg.code);
        });
        sprite.run();
      }
    };
    this.socket = socket;
  }

  #sendMessage(obj: object) {
    this.socket.send(JSON.stringify(obj));
  }
  sendSysMsg(code: number, obj) {
    this.#sendMessage({
      ...obj,
      type: "system",
      code,
      id: this.id,
    });
  }
  sendKeyMsg(type: "down" | "up", code: string) {
    this.#sendMessage({
      type: "public",
      keyType: type,
      code,
      id: this.id,
    });
  }
  initTank() {
    console.log(this.id, this.ids);

    this.ids.forEach((id, index) => {
      if (index === 0) this.tankMap.set(id, new MyTank({ speed: 2, id }));
      else this.tankMap.set(id, new MyTank({ speed: 2, id, x: 750, y: 750 }));
    });
  }
}
